<template>
  <div>
    <el-carousel indicator-position="outside" height="360px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3>{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <h2 style="text-align: center">热门课程</h2>
<!--    热门课程-->
    <div class="item-div">
      <div v-for="item in items" class="items-item">
        <div class="item-image">
          <el-image :src="item.cover" style="overflow: hidden;border-radius: 12px 12px 0 0">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
        <div class="item-content">
          <div>
            {{item.title}}
          </div>
          <div>{{item.views}}人观看 | {{item.comment}}评论</div>
        </div>
      </div>
    </div>
<!--    全部课程-->
    <div class="btn"><el-button round class="btn-all">全部课程</el-button></div>

<!--    名师大咖-->
    <h2 style="text-align: center">名师大咖</h2>
    <div class="item-div">
      <div v-for="teacher in teacherList" class="teacher-list">
        <div class="teacher-div">
          <el-avatar :src="teacher.avatar" :size="120"></el-avatar>
          <div>{{teacher.name}}</div>
          <div>{{teacher.level}}</div>
        </div>
        <el-divider><i class="el-icon-medal"></i></el-divider>
        <span>{{teacher.description}}</span>
      </div>
    </div>
<!--    全部讲师-->
    <div class="btn"><el-button round class="btn-all">全部讲师</el-button></div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        teacherList: [
          {
            avatar: '',
            name: '讲师',
            level: '评奖',
            description: '讲师简介'
          },
          {
            avatar: '',
            name: '讲师',
            level: '评奖',
            description: '讲师简介'
          },
          {
            avatar: '',
            name: '讲师',
            level: '评奖',
            description: '讲师简介'
          },
          {
            avatar: '',
            name: '讲师',
            level: '评奖',
            description: '讲师简介'
          },
        ],
        items:[
          {
            cover: 'https://xiyun-online-education.oss-cn-hangzhou.aliyuncs.com/Cover/20-12-21/04A2C9D7ABC74301898ACA1BD33A154B.jpg',
            title: 'Java精品课程',
            views: 100,
            comment: 123
          },
          {
            cover: 'https://xiyun-online-education.oss-cn-hangzhou.aliyuncs.com/Cover/20-12-21/04A2C9D7ABC74301898ACA1BD33A154B.jpg',
            title: 'HTML5',
            views: 1000,
            comment: 1223
          },
          {
            cover: 'https://xiyun-online-education.oss-cn-hangzhou.aliyuncs.com/Cover/20-12-21/04A2C9D7ABC74301898ACA1BD33A154B.jpg',
            title: 'Java精品课程',
            views: 100,
            comment: 123
          },
          {
            cover: 'https://xiyun-online-education.oss-cn-hangzhou.aliyuncs.com/Cover/20-12-21/04A2C9D7ABC74301898ACA1BD33A154B.jpg',
            title: 'HTML5',
            views: 1000,
            comment: 1223
          },
          {
            cover: 'https://xiyun-online-education.oss-cn-hangzhou.aliyuncs.com/Cover/20-12-21/04A2C9D7ABC74301898ACA1BD33A154B.jpg',
            title: 'Java精品课程',
            views: 100,
            comment: 123
          },
          {
            cover: 'https://xiyun-online-education.oss-cn-hangzhou.aliyuncs.com/Cover/20-12-21/04A2C9D7ABC74301898ACA1BD33A154B.jpg',
            title: 'HTML5',
            views: 1000,
            comment: 1223
          }, {
            cover: 'https://xiyun-online-education.oss-cn-hangzhou.aliyuncs.com/Cover/20-12-21/04A2C9D7ABC74301898ACA1BD33A154B.jpg',
            title: 'HTML5',
            views: 1000,
            comment: 1223
          },
          {
            cover: 'https://xiyun-online-education.oss-cn-hangzhou.aliyuncs.com/Cover/20-12-21/04A2C9D7ABC74301898ACA1BD33A154B.jpg',
            title: 'Java精品课程',
            views: 100,
            comment: 123
          }
        ],
      }
    }
  }
</script>

<style scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .item-div{
    width: 1280px;
    padding: 10px;
    margin: auto;
  }
  .items-item{
    width: 285px;
    margin: 0 10px 20px 20px;
    display: inline-block;
    border-radius: 12px;
  }
  .item-image{
    width: 285px;
  }
  .item-content{
    width: 285px;
  }
  .items-item:hover{
    position: relative;
    top: -2px;
    box-shadow: 0 6px 12px 2px rgba(0, 0, 0, 0.1);
  }
  .btn{
    width: 150px;
    margin: auto;
  }
  .btn-all{
    color: mediumspringgreen;
    border: 1px dashed mediumspringgreen;
    width: 150px;
  }
  .teacher-list{
    width: 280px;
    text-align: center;
    display: inline-block;
    margin: 20px;
  }
  .teacher-div{
    width: 280px;
    padding: 5px;
  }
</style>

